---
name: useList
rank: 48
tagline: Manage and manipulate lists with useList.
sandboxId: uselist-5mmpw2
previewHeight: 550px
relatedHooks:
  - usehistorystate
  - useprevious
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The useList hook is useful for managing and manipulating lists in a React
  component. It encapsulates the list state and provides a set of convenient
  methods to modify the list. By using this hook, you can easily initialize a
  list with a default value and access various methods to add, remove, update,
  or clear elements within the list.
</HookDescription>

<div class="reference">
  ### Parameters

  <div class="table-container">
  | Name        | Type  | Description                                              |
  | ----------- | ----- | -------------------------------------------------------- |
  | defaultList | array | The initial list of elements. Default is an empty array. |
  </div>

  ### Return Value

  The `useList` hook returns an array with two elements:

  <div class="table-container">
  | Name           | Parameters                  | Description                                                       |
  | -------------- | --------------------------- | ----------------------------------------------------------------- |
  | `[0]`          |                             | The current list of elements.                                     |
  | `[1].set`      | l: array                    | Replaces the entire list with a new array `l`.                    |
  | `[1].push`     | element: any                | Appends the `element` to the end of the list.                     |
  | `[1].removeAt` | index: number               | Removes the element at the specified `index` from the list.       |
  | `[1].insertAt` | index: number, element: any | Inserts the `element` at the specified `index` in the list.       |
  | `[1].updateAt` | index: number, element: any | Replaces the element at the specified `index` with the `element`. |
  | `[1].clear`    |                             | Removes all elements from the list.                               |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import { useList } from "@uidotdev/usehooks";
import ListDemo from "./ListDemo";

export default function App() {
  const [list, { set, push, removeAt, insertAt, updateAt, clear }] = useList([
    "First",
    "Second",
    "Third",
  ]);

  return (
    <section>
      <header>
        <h1>UseList</h1>
        <button
          disabled={list.length < 1}
          className="link"
          onClick={() => insertAt(1, "woo")}
        >
          Insert After First
        </button>
        <button
          disabled={list.length < 2}
          className="link"
          onClick={() => removeAt(1)}
        >
          Remove Second Item
        </button>
        <button className="link" onClick={() => set([1, 2, 3])}>
          Reset
        </button>
        <button className="link" onClick={() => clear()}>
          Clear
        </button>
      </header>
      <ListDemo
        list={list}
        updateAt={updateAt}
        push={push}
        removeAt={removeAt}
      />
    </section>
  );
}
```

</StaticCodeContainer>
